<template>
	<view class="">
		<!-- 搜索 -->
		<view class="" style="background: #fff; padding: 56rpx 0 34rpx 0; border-bottom: 4rpx solid #f4f5f9">
			<view class="flex align-center" style="margin: 0 32rpx 0 32rpx; background: #f3f3f3; border-radius: 8rpx; padding: 14rpx 24rpx">
				<view class="" style="font-size: 0; margin-right: 14rpx">
					<image style="width: 40rpx; height: 40rpx" src="./static/10.png" mode=""></image>
				</view>
				<input @input="search" class="flex-1" type="text" v-model="keyWords" placeholder="电话/昵称搜索" />
				<view v-if="keyWords" @click="clear" class="" style="font-size: 0; padding-left: 20rpx">
					<image style="width: 28rpx; height: 28rpx" src="./static/21.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex" v-for="(item, index) in userList" @click="clickList(item)" :key="index" style="padding: 20rpx 34rpx; border-bottom: 2rpx solid #f4f5f9">
			<view class="" style="font-size: 0; margin-right: 20rpx">
				<image style="width: 84rpx; height: 84rpx; border-radius: 50%" :src="item.avatar" mode=""></image>
			</view>
			<view class="flex flex-clum justify-between" style="height: 84rpx">
				<view class="" style="font-size: 30rpx; font-weight: 700; color: #333333">
					{{ item.nickname }}
				</view>
				<view class="" style="font-size: 26rpx; color: #999999">
					{{ item.mobile }}
				</view>
			</view>
		</view>
		<view class="" style="height: 48rpx"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyWords: '',
			userList: [],
			shopId: 0
		};
	},
	onLoad(options) {
		this.shopId = options.shopId;
		this.getShopList();
	},
	methods: {
		clear() {
			this.keyWords = '';
			this.getShopList();
		},
		clickList(item) {
			item.keyWords = this.keyWords;
			item.shopId = this.shopId;
			uni.navigateTo({
				url: '/pages/schedule/addEmployee2?obj=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		search() {
			this.getShopList();
		},
		//获取要添加的员工列表
		getShopList() {
			this.$request({
				url: 'Shopuser/user_lists',
				method: 'POST',
				data: {
					keyword: this.keyWords,
					shop_id: this.shopId
				}
			}).then((res) => {
				this.userList = res.data.data;
				// this.shopId = this.list[0].id;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.flex-clum {
	flex-direction: column;
}
.align-center {
	align-items: center;
}
.align-end {
	align-items: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
</style>
